<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<html>
<head>
<base href="<%=basePath%>">
<title>可编辑文件列表</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="${base}/css/bootstrap.css">
<script type="text/javascript" src="${base}/js/jquery-3.1.0.js"></script>
<script type="text/javascript" src="${base}/js/bootstrap.js"></script>
<script>
	function add(id) {
		id++;
		alert(id);
		$("#addCol")
				.append(
						/* '<a>--------------</a>' */
						'<a>--------------------------------------------------------------------------</a>'
								+ '<div class="form-group"><label for="colName'+id+'" class="col-sm-2 control-label">列名</label>'
								+ '<div class="col-sm-6"><input type="text" class="form-control" id="colName'+id+'" name="colName'+id+'" placeholder="请输入列名"></div></div>'
								+ '<div class="form-group"><label for="inlineRadio1" class="col-sm-2 control-label">单元格类型</label><div class="col-sm-6"><label class="radio-inline">'
								+ '<input type="radio" name="colType'+id+'" id="inlineRadio1" value="0" checked>文本框</label><label class="radio-inline"> <input type="radio"name="colType'+id+'" id="inlineRadio2" value="1"> 下拉框</label> '
								+ '<label class="radio-inline"> <input type="radio"name="colType'+id+'" id="inlineRadio2" value="2">时间框</label></div></div><div class="form-group"><label for="date" class="col-sm-2 control-label">默认值</label>'
								+ '<div class="col-sm-3"><input type="text" class="form-control" name="defVal'+id+'"></div></div>');

	}
</script>
</head>

<body>
	<!--整体div-->
	<div class="container">
		<jsp:include page="${path}/menu.jsp"></jsp:include>

		<div class="col-md-6"
			style="background: #fff; padding: 40px 80px; margin: 30px; border: 7px solid #ccc;">
			<font class="create"><input type="button"
				class="btn btn-primary" id="regBut" width="100" value="创建模板"></font>
			<form class="form-horizontal" style="margin-top: 5px;"
				action="${ pageContext.request.contextPath }/tpl/create"
				method="post">
				<input type="hidden" name="method" value="create">

				<div class="form-group">
					<label for="templateName" class="col-sm-2 control-label">模板名</label>
					<div class="col-sm-6">
						<input type="text" class="form-control" id="templateName"
							name="templateName" placeholder="请输入模板名">
					</div>
					<span id="s1"></span>
				</div>
				<div id="addCol">
					<a>------------------------------------------------------------------------------</a>

					<div class="form-group">
						<label for="colName" class="col-sm-2 control-label">列名</label>
						<div class="col-sm-6">
							<input type="text" class="form-control" id="colName"
								name="colName" placeholder="请输入列名">
						</div>
						<span id="s1"></span>
					</div>

					<div class="form-group">
						<label for="inlineRadio1" class="col-sm-2 control-label">单元格类型</label>
						<div class="col-sm-6">
							<label class="radio-inline"> <input type="radio"
								name="colType" id="inlineRadio1" value="0" checked="true">文本框
							</label> <label class="radio-inline"> <input type="radio"
								name="colType" id="inlineRadio2" value="1"> 下拉框
							</label> <label class="radio-inline"> <input type="radio"
								name="colType" id="inlineRadio3" value="2">时间框
							</label>
						</div>
					</div>
					<div class="form-group">
						<label for="defVal" class="col-sm-2 control-label">默认值</label>
						<div class="col-sm-3">
							<input type="text" class="form-control" name="defVal" id="defVal">
						</div>
					</div>
				</div>

				<input type="button" class="btn btn-primary" onclick="add(id++)"
					style="width: 300px" value="+">

				<div class="form-group">
					<div class="col-sm-offset-2 col-sm-10">
						<input type="submit" class="btn btn-primary" id="regBut"
							width="100" value="创建模板">
					</div>
				</div>
			</form>
		</div>
	</div>


</body>
<script type="text/javascript">
	
	function addRow() {
		var tr = document.createElement('tr');
		tr.className = "tr";
		var tbody = document.getElementById("tbody");
		var rows = table.rows.length;
		var cells = table.rows.item(0).cells.length;
		tbody.appendChild(tr);
		for (var i = 0; i < cells; i++) {
			var inputi = document.createElement('input');
			inputi.style.border = "none";
			inputi.style.height = "46px";
			inputi.style.font.size = "10px";
			var tdi = document.createElement('td');
			tdi.appendChild(inputi);
			tdi.className = "td";
			tdi.style.height = "46px";
			tdi.style.width = " 5%";
			tr.appendChild(tdi);
		}
	}
	function addCell() {
		$(".tr")
				.append(
						'<td style="height:30px;width:5%"class="td"><input type="text" style="border:none;height:46px;font-size:10px"></td>');
	}
	function readHtml() {
		var map = {};
		var rows = table.rows.length;
		var cells = table.rows.item(0).cells.length;
		for (var i = 0; i < rows; i++) {
			var cellValue = [];
			for (var j = 0; j < cells; j++) {
				valuej = table.rows.item(i).cells.item(j).childNodes[0].value;
				cellValue[j] = valuej;
			}
			map[i.toString()] = cellValue;
		}
		var json = JSON.stringify(map);
		var params = JSON.stringify(json);

		var filename = $("#filename").val();
		console.log(filename);
		$.ajax({
			url : "${base}/excel/write",
			data : {
				"json" : params,
				"filename" : filename
			},
			type : "POST",
			success : function() {
				alert("更新成功");
			},
			async : true,
			cache : false
		});
	}
	function deleteExcel(obj) {
		var filename = obj.value;
		var param = "filename=" + filename;
		if (confirm("确认删除" + filename + "吗？")) {
			$.ajax({
				url : "${base}/excel/delete",
				data : param,
				dataType : "json",
				type : "POST",
				success : function(data) {
					//Location.href = "${base}/excel/list";
					alert("删除成功");
					location.reload();
				},
				async : true,
				cache : false
			});
		}
	}
	$(".trr").bind("mouseover", function() {
		$(this).css("background-color", "#eeeeee");
	})
	$(".trr").bind("mouseout", function() {
		$(this).css("background-color", "#ffffff");
	})
</script>
</html>


